<template>
  <div class="dashboard-container">
    <div class="app-container">
      <el-card shadow="never">
        <!-- ---------------------面包屑------------------ -->
        <div class="directorys-header" v-if="$route.query.id||$route.query.name">
          <el-breadcrumb separator-class="el-icon-arrow-right">
            <el-breadcrumb-item>学科管理</el-breadcrumb-item>
            <el-breadcrumb-item>{{ $route.query.name }}</el-breadcrumb-item>
            <el-breadcrumb-item>目录管理</el-breadcrumb-item>
          </el-breadcrumb>
        </div>

        <!-- --------------------------头部------------------------- -->
        <el-row type="flex" justify="space-between">
          <el-col :span="18">
            <el-form :inline="true" :model="catalogue" class="demo-form-inline">
              <el-form-item label="目录名称" style="margin-left: 10px">
                <el-input v-model="catalogue.bookname" size="small"></el-input>
              </el-form-item>

              <el-form-item label="状态" style="margin-left: 50px">
                <el-select
                  v-model="catalogue.status"
                  placeholder="请选择"
                  size="small"
                >
                  <el-option
                    v-for="item in options"
                    :key="item.value"
                    :label="item.label"
                    :value="item.value"
                  >
                  </el-option>
                </el-select>
              </el-form-item>

              <el-form-item style="text-align:right">
                  <el-button size="small" @click="handleout">清除</el-button>
                  <el-button size="small" type="primary" @click="handleseek"
                    >搜索</el-button
                  >
              </el-form-item>
            </el-form>
          </el-col>

          <el-col :span="4" style="text-align:right">
            <el-button
              v-if="$route.query.id"
              type="text"
              @click="getback"
              icon="el-icon-back"
              >返回学科</el-button
            >
            <el-button
              type="success"
              size="small"
              icon="el-icon-edit"
              @click="handleBook"
              >新增目录</el-button
            >
          </el-col>
        </el-row>
        <!--------------------------- 警告栏 ---------------------------->

        <el-alert :closable="false" :title="title" type="info" show-icon>
        </el-alert>

        <!-- --------------------------表格----------------------- -->

        <el-table
          :data="subjectlist"
          style="margin-top: 20px; width: 100%"
          size="medium"
          :header-cell-style="{ background: '#FAFAFA' }"
        >
          <el-table-column label="序号" prop="id" width="80" type="index">
          </el-table-column>
          <el-table-column prop="subjectName" label="所属学科">
          </el-table-column>
          <el-table-column prop="directoryName" label="目录名称">
          </el-table-column>
          <el-table-column prop="username" label="创建者"> </el-table-column>
          <el-table-column
            prop="addDate"
            label="创建日期"
            :formatter="formatting"
          >
          </el-table-column>
          <el-table-column prop="totals" label="面试题数量"> </el-table-column>
          <el-table-column prop="state" label="状态" :formatter="FormatTing">
          </el-table-column>

          <el-table-column label="操作" width="200">
            <template #default="{ row }">
              <el-button type="text" @click="forbidden(row)">{{
                row.state ? "禁用" : "开启"
              }}</el-button>
              <el-button
                type="text"
                @click="Edit(row.id)"
                :disabled="row.state === 1"
                >修改</el-button
              >
              <el-button
                type="text"
                @click="Delete(row.id)"
                :disabled="row.state === 1"
                >删除</el-button
              >
            </template>
          </el-table-column>
        </el-table>
        <!-- -----------------------分页--------------------------- -->

        <el-pagination
          background
          @size-change="handleSizeChange"
          @current-change="handleCurrentChange"
          :current-page="catalogue.page"
          :page-sizes="[5, 10, 20, 30,40,50]"
          :page-size="catalogue.pagesize"
          layout="->,prev, pager, next,sizes, jumper"
          :total="total"
        >
        </el-pagination>
      </el-card>

      <DirectorysAdd
        :IsShow.sync="IsShow"
        @add-handle="getsubjectlist"
        ref="DTADD"
      ></DirectorysAdd>
    </div>
  </div>
</template>

<script>
import DirectorysAdd from '../components/directorys-add.vue'
import {
  list as getacquire,
  remove,
  detail,
  changeState
} from '@/api/hmmm/directorys.js'
import dayjs from 'dayjs'
export default {
  name: 'Directorys',
  created () {
    if (this.$route.query.id || this.$route.query.name) {
      this.handlediscipline()
      return
    }
    this.getsubjectlist() // 请求数据列表
  },
  components: {
    DirectorysAdd
  },
  computed: {
    title () {
      return '数据一共' + this.total + '条'
    }
  },
  data () {
    return {
      // form表单
      catalogue: {
        bookname: null,
        status: null,
        subjectID: null,
        directoryName: null,
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      },
      // 选择器内容
      options: [
        {
          value: 1,
          label: '启用'
        },
        {
          value: 0,
          label: '禁用'
        }
      ],
      // 数据列表
      subjectlist: [
        {
          id: null, // 编号
          subjectName: null, // 学科名称
          directoryName: null, // 目录名称
          username: null, // 创建者
          addDate: null, // 创建日期
          totals: null, // 面试题数量
          state: null // 状态
        }
      ],
      // page: 1, // 当前页数
      // pagesize: 10, // 页尺寸
      total: 0, // 总数量
      List: [], // 全部数据列表
      IsShow: false // 添加的弹框
    }
  },
  methods: {
    // 请求数据列表
    async getsubjectlist () {
      this.catalogue.subjectID = this.$route.query.id || null
      // this.catalogue.directoryName = this.catalogue.bookname || this.$route.query.name || null
      // this.catalogue.state = this.catalogue.status || null
      const { data } = await getacquire(this.catalogue)
      // console.log(data)
      this.subjectlist = data.items
      this.total = data.counts
    },
    // 改变页码时触发
    async handleCurrentChange (val) {
      this.catalogue.page = val
      this.getsubjectlist()
    },
    // 每页条数改变时触发
    async handleSizeChange (val) {
      this.catalogue.pagesize = val
      this.catalogue.page = 1
      this.getsubjectlist()
    },
    // 清除按钮
    handleout () {
      this.catalogue = {
        bookname: null,
        status: null,
        subjectID: null,
        directoryName: null,
        page: 1, // 当前页数
        pagesize: 10// 页尺寸
      }
    },

    // 获取学科分类
    async handlediscipline () {
      // { page: 1, pagesize: this.pagesize, subjectID: this.$route.query.id }
      this.catalogue.page = 1
      this.getsubjectlist()
    },

    // 搜索按钮
    handleseek () {
      this.catalogue.page = 1
      this.getsubjectlist()
    },
    // 格式化日期
    formatting (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      // const date1 = cellValue.slice(0, 10)
      // const date2 = cellValue.slice(11, 19)
      // const date3 = date1 + ' ' + date2
      // return date3
      return dayjs(cellValue).format('YYYY-MM-DD- HH:mm:ss')
    },
    // 格式化状态
    FormatTing (row, column, cellValue, index) {
      // console.log(row, column, cellValue, index)
      if (cellValue === 1) {
        return '已启用'
      } else {
        return '已禁用'
      }
    },
    // 新增目录
    handleBook () {
      this.IsShow = true
    },
    // 删除
    Delete (id) {
      this.$confirm('此操作将永久删除该目录，是否继续？', '提升', {
        type: 'warning'
      }).then(async () => {
        await remove({ id })
        this.$message.success('删除成功')
        this.getsubjectlist()
      })
    },
    // 修改
    async Edit (id) {
      this.IsShow = true
      const { data } = await detail({ id })
      this.$refs.DTADD.Form = data
    },
    // 禁用/开启
    async forbidden (row) {
      if (row.state === 0) {
        row.state = 1
      } else {
        row.state = 0
      }
      await changeState(row)
      this.$message.success('操作成功')
    },
    // 返回学科页
    getback () {
      this.$router.push('/subjects/list')
    }
  }
}
</script>

<style scoped lang="scss">
.directorys-header {
  height: 30px;
  margin-bottom: 20px;
  border-bottom: 1px solid #ebeef5;
}
.app-container {
  padding: 10px;
}
</style>
